<template>
	<jk-dialog
		v-model="showDialog"
		title="版本记录"
		width="940px"
		append-to-body
		:show-cancel-btn="false"
		:show-close-btn="true"
		:show-confirm-btn="false"
		@on-visible-change="onVisibleChange"
		@on-close="onVisibleChange(false)"
	>
		<header ref="box1" class="flex-end-center margin-bottom-10">
			<el-select v-model="searchParams.workshopId" size="small" placeholder="所属区域" class="search-bar-item-size1 item-gap" @change="onWorkshopChange">
				<el-option
					v-for="item in workshopList"
					:key="item.id"
					:label="item.name"
					:value="item.id"
				></el-option>
			</el-select>
			<div class="search-bar-item-size3 item-gap">
				<el-date-picker
					v-model="searchParams.belongDate"
					type="date"
					size="small"
					style="width: 100%;"
					placeholder="报工日期"
					value-format="yyyy-MM-dd"
					@change="onDateChange"
				></el-date-picker>
			</div>
			<el-input v-model="processName" disabled size="small" placeholder="工序" class="search-bar-item-size1 item-gap"></el-input>
			<el-select v-model="searchParams.scheduleShiftId" size="small" placeholder="班次" class="search-bar-item-size3 item-gap" @change="onScheduleShiftChange">
				<el-option
					v-for="item in scheduleShiftList"
					:key="item.id"
					:label="`${item.shiftName} (${item.beginTime} ~ ${item.endTime})`"
					:value="item.id"
				></el-option>
			</el-select>
			<jk-search-button @click="onSearchBtn"></jk-search-button>
		</header>
		<jk-table :data="tableData" :loading="showLoading" :height="dialogTableHeight - 30">
			<vxe-column :min-width="150" field="code" title="报工单号"></vxe-column>
			<vxe-column width="80" field="version" title="最新版本">
				<template slot-scope="scope">{{ scope.row.version }}.0</template>
			</vxe-column>
			<vxe-column width="80" field="version" title="版本数">
				<template slot-scope="scope">
					<!--<el-popover trigger="click" title="版本明细" width="600">
						<el-row v-if="scope.row.versionList.length" :gutter="4" class="margin-bottom-4">
							<el-col :span="12">
								<el-button size="mini" class="width-100-percent margin-bottom-4">
									<div class="flex-between-center width-100-percent">
										<div class="width-100-percent flex-start-center">
											<span>创建：</span>
											<span style="font-weight: 700;">{{ scope.row.versionList[0].creatorName }}</span>
										</div>
										<span class="width-100-percent flex-end-center">{{ scope.row.versionList[0].createTime }}</span>
									</div>
								</el-button>
							</el-col>
							<el-col :span="12">
								<el-button size="mini" class="width-100-percent margin-bottom-4">
									<div class="flex-between-center width-100-percent">
										<div class="width-100-percent flex-start-center">
											<span>最近：</span>
											<span style="font-weight: 700;">{{ scope.row.versionList[scope.row.versionList.length - 1].updaterName }}</span>
										</div>
										<span class="width-100-percent flex-end-center">{{ scope.row.versionList[scope.row.versionList.length - 1].updateTime }}</span>
									</div>
								</el-button>
							</el-col>
						</el-row>
						<jk-table :data="scope.row.versionList" size="mini" :height="200">
							<vxe-column width="80" field="version" title="版本号">
								<template slot-scope="scope">{{ scope.row.version }}.0</template>
							</vxe-column>
							<vxe-column :min-width="120" field="updaterName" title="修改人"></vxe-column>
							<vxe-column :min-width="160" field="updateTime" title="修改时间"></vxe-column>
							<vxe-column width="80" align="center" field="version" title="操作">
								<template slot-scope="scope">
									<div style="cursor: pointer;color: #2d8cf0;" @click="onDetailBtn(scope.row)">查看</div>
								</template>
							</vxe-column>
						</jk-table>
						<el-button slot="reference" type="text" size="mini">
							{{ scope.row.versionList.length }} 个
						</el-button>
					</el-popover>-->
					<el-button slot="reference1" type="text" size="mini" @click="onDetailBtn(scope.row)">
						{{ scope.row.historyCount + 1 }} 个
					</el-button>
				</template>
			</vxe-column>
			<vxe-column :min-width="120" field="creatorName" title="创建人"></vxe-column>
			<vxe-column width="160" field="createTime" title="创建时间"></vxe-column>
			<vxe-column width="120" field="updaterName" title="最近修改人"></vxe-column>
			<vxe-column width="160" field="updateTime" title="最近修改时间"></vxe-column>
		</jk-table>
	</jk-dialog>
</template>

<script>
    import calHeight from '/src/mixins/cal-dialog-height';
    import { productionPrdReportPage } from '../../../../api/production/xsReport';
    import { formatDate, tipsBar } from '../../../../utils/jk/jk-tool';
    import { workforcemanagementScheduleList } from '../../../../api/schedule/scheduling';
    import { spinProcessPage } from '../../../../api/technology/process';
    export default {
        props: {
            // 页面权限的前缀
            permissionPrefix: {
                type: String,
                default: ''
            },
            dialogState: {
                type: Boolean,
                default: false
            },
            dataId: {
                type: [String, Number],
                default: ''
            },
            processCode: {
                type: String,
                default: ''
            }
        },
        mixins: [calHeight],
        data() {
            return {
                processName: '',
                scheduleShiftList: [],
                processList: [],
                searchParams: {
                    selectMaster: true,
                    workshopId: null,
                    processId: null,
                    processCode: '',
                    scheduleShiftId: null,
                    belongDate: null
                },
                workshopList: [],
                showLoading: false,
                showDialog: false,
                tableData: []
            };
        },
        methods: {
            onDetailBtn(row) {
                this.$toOtherRouter({
                    name: 'detailXsReport',
                    query: {
                        id: row.id
                        // formPage: 'history'
                    }
                });
            },
            onSearchBtn() {
                this.showLoading = true;
                this.getHistoryDataRequest();
            },
            onDateChange() {
                this.$set(this.searchParams, 'scheduleShiftId', null);
                this.$set(this.searchParams, 'shiftName', null);
                this.$set(this.searchParams, 'shiftId', null);
                this.scheduleShiftList = [];
                this.getDateScheduleShiftOptionRequest();
            },
            onScheduleShiftChange(e) {
                let item = {};
                if (e) {
                    item = this.scheduleShiftList.find(x => x.id === e);
                } else {
                    item = {
                        id: null,
                        shiftId: null,
                        shiftName: null,
                        scheduleId: null
                    };
                }
                this.$set(this.searchParams, 'scheduleId', item.scheduleId);
                this.$set(this.searchParams, 'scheduleShiftId', item.id);
                this.$set(this.searchParams, 'shiftId', item.shiftId);
            },
            onWorkshopChange() {
                this.$set(this.searchParams, 'processId', null);
                this.$set(this.searchParams, 'prdReportMachineList', []);
                this.$set(this.searchParams, 'scheduleShiftId', null);
                this.$set(this.searchParams, 'shiftId', null);
                this.scheduleShiftList = [];
                this.getProcessListRequest();
                this.getDateScheduleShiftOptionRequest();
            },
            getDateScheduleShiftOptionRequest() {
                if (this.searchParams.workshopId && this.searchParams.belongDate) {
                    return workforcemanagementScheduleList({
                        belongDate: [this.searchParams.belongDate, this.searchParams.belongDate],
                        workshopId: this.searchParams.workshopId
                    }).then(res => {
                        if (res.data.status === 200) {
                            const resData = res.data.res;
                            if (resData && resData.length) {
                                this.scheduleShiftList = resData[0].scheduleShiftList;
                            } else {
                                tipsBar(this, 'custom', 'warning', '当前时间未排班，请排班后再操作！');
                            }
                        }
                    });
                }
            },
            getProcessListRequest() {
                return spinProcessPage({ code: this.processCode, workshopId: this.searchParams.workshopId }).then(res => {
                    if (res.data.status === 200) {
                        this.processList = res.data.res;
                        if (res.data.res && res.data.res.length) {
                            const item = res.data.res[0];
                            this.$set(this.searchParams, 'processId', item.id);
                            this.processName = item.name;
                        }
                    }
                });
            },
            getHistoryDataRequest() {
                if (this.searchParams.belongDate && this.searchParams.workshopId && this.searchParams.processId && this.searchParams.scheduleShiftId) {
                    this.searchParams.processCode = this.processCode;
                    productionPrdReportPage(this.searchParams).then(res => {
                        // productionPrdReportHistoryPage(this.searchParams).then(res => {
                        this.showLoading = false;
                        if (res.data.status === 200) {
                            const arr = [];
                            let item = null;
                            if (res.data.res) {
                                res.data.res.forEach(x => {
                                    x.versionList = [];
                                    item = arr.find(k => x.code === k.code) || null;
                                    if (item) {
                                        arr.forEach(j => {
                                            if (x.code === j.code) {
                                                j.versionList.unshift(x);
                                                // 将外层替换为最新的版本
                                                j.id = x.id;
                                                j.version = x.version;
                                                j.updaterName = x.updaterName;
                                                j.updateTime = x.updateTime;
                                            }
                                        });
                                    } else {
                                        arr.unshift({
                                            ...x,
                                            versionList: [x]
                                        });
                                    }
                                });
                            }
                            // this.tableData = arr;
                            this.tableData = res.data.res;
                        }
                    });
                } else {
                    tipsBar(this, 'custom', 'warning', '区域、日期、工序、班次不能为空!');
                    this.showLoading = false;
                }
            },
            onVisibleChange(e) {
                if (!e) {
                    Object.assign(this.$data, this.$options.data());
                }
                this.$emit('on-visible-change', e);
            },
            async getDependentData() {
                this.showLoading = true;
                this.workshopList = this.$store.state.user.userWorkshop.workshopList;
                this.$set(this.searchParams, 'workshopId', this.$store.state.user.userWorkshop.defaultWorkshopId);
                this.$set(this.searchParams, 'belongDate', formatDate(Date.now()));
                await this.getProcessListRequest();
                await this.getDateScheduleShiftOptionRequest();
                this.showLoading = false;
            }
        },
        watch: {
            dialogState(newVal) {
                this.showDialog = newVal;
                if (newVal) {
                    this.getDependentData();
                }
            }
        }
    };
</script>
